// 导入路由
import { Router, Route, Switch, Redirect, Link } from 'react-router-dom'
import history from 'utils/history'

import { hasToken } from 'utils/storage'
import AuthRoute from 'components/AuthRoute'
import { lazy, Suspense } from 'react'

// 导入页面组件
// import Login from 'pages/Login'
// import Home from 'pages/Layout'
// import NotFound from 'pages/NotFound'
const Home = lazy(() => import('pages/Layout'))
const Website = lazy(() => import('pages/Website'))
const Login = lazy(() => import('pages/Login'))
const NotFound = lazy(() => import('pages/NotFound'))

function App() {
  return (
    <div className="app">
      <Router history={history}>
        {/* <Link to="/home">首页</Link>
        <Link to="/login">登录</Link> */}
        {/* 配置路由规则 */}
        <Suspense fallback={<div>...loading</div>}>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            {/* <Route
            path="/home"
            render={(routeProps) => {
              // // console.log(routeProps)
              if (hasToken) {
                return <Home {...routeProps} />
              } else {
                return <Login {...routeProps} />
              }
            }}
          ></Route> */}
            <AuthRoute path="/home" component={Home}></AuthRoute>
            <AuthRoute path="/website" component={Website}></AuthRoute>
            <Route path="/login" component={Login}></Route>
            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}

export default App
